<template>
  <div class="page-com-custom-container">
    <el-row>
      <el-col :lg="{span:10}"
              :md="{span:14}"
              :sm="{span:13}"
              :xs="{span:15}">
        <span>选择单位</span>
        <el-input placeholder="请输入内容"
                  v-model="selectForm.unitName"
                  class="choose-company-input">
          <el-button slot="append"
                     icon="el-icon-share"
                     @click="chooseCompanyDialogVisible=true"></el-button>
        </el-input>
      </el-col>
      <el-col :lg="{span:10,offset:4}"
              :md="{span:10}"
              :sm="{span:11}"
              :xs="{span:9}"
              align="right"
              class="pull-right">
        <el-button type="primary"
                   @click="layoutPreview">布局预览</el-button>
        <el-button type="primary"
                   @click="layoutDefinition">布局定义</el-button>
      </el-col>
    </el-row>
    <div class="page-component-table">
      <el-row>
        <el-col :span="4">
          <el-tree :data="companyTreeData"
                   :props="companyTreeProps"
                   show-checkbox
                   node-key="value"
                   :default-checked-keys="[1]"></el-tree>
        </el-col>
        <el-col :span="20">
          <el-table highlight-current-row
                    :header-cell-style="{background:'#f5f5f5'}"
                    :data="pageMaintainData.list"
                    class="page-list-table"
                    border>
            <el-table-column prop="page_tmp_name"
                             label="页面"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="moudle_name"
                             label="模块名称"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="moudle_type"
                             label="模块类型"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="router"
                             label="路由地址"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="h"
                             label="高度"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="w"
                             label="宽度"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="flush_time"
                             label="刷新时间"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="操作"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button @click="modulePreview(scope.row)"
                           type="text">预览</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24"
                  id="bottomMargin">
            <el-pagination @current-change="handlePageChange"
                           :current-page="requestParam.page"
                           :page-size="requestParam.page_size"
                           layout="total,sizes,prev, pager, next, jumper"
                           background
                           :total="pageMaintainData.total_count"
                           align="center">
            </el-pagination>
          </el-col>

        </el-col>
      </el-row>
    </div>
    <ChooseCompanyDialog :dialogVisible.sync="chooseCompanyDialogVisible"
                         :companyInfo.sync="choosenCompany"></ChooseCompanyDialog>
    <ModulePreviewDialog :dialogVisible.sync="modulePreviewDialogVisible"
                         :layoutData="layoutData"></ModulePreviewDialog>
  </div>
</template>
<script>
import { pageComMaintainApi, pageComCustomApi } from "@/services/SystemSetting";
import ChooseCompanyDialog from "./components/ChooseCompanyDialog";
import ModulePreviewDialog from "./components/ModulePreviewDialog";
export default {
  data () {
    return {
      selectForm: {
        unitName: ""
      },
      requestParam: {
        page: 1,
        instance_type: 1,
        rela_id: "",
        page_tmp_id: 1,
        per_page: 10,
      },
      pageMaintainData: {
        list: [],
        total_page: 0,
        total_count: 0
      },
      companyTreeData: [
        {
          label: "首页",
          value: "1"
        }
      ],
      companyTreeProps: {
        children: "children",
        label: "label"
      },
      // 选择单位弹框是否可见
      chooseCompanyDialogVisible: false,
      choosenCompany: {},
      // 预览模块弹框是否可见
      modulePreviewDialogVisible: false,
      // 预览模块弹框所展示模块的数据
      layoutData: {}
    };
  },
  components: {
    ChooseCompanyDialog,
    ModulePreviewDialog
  },
  watch: {
    choosenCompany: {
      handler (newval, oldval) {
        console.log(newval, "watch choose company");
        this.requestParam.rela_id = newval.company_id;
        this.selectForm.unitName = newval.company_name;
        this.getModuleList();
      },
      deep: true
    }
  },
  methods: {
    // 获取模块列表
    getModuleList () {
      pageComCustomApi
        .getPageModuleList({
          params: this.requestParam
        })
        .then(res => {
          console.log(res, "get page module list");
          if (res.data) {
            this.pageMaintainData.list = res.data.data;
            this.pageMaintainData.total_count = res.data.total;
          }
        });
    },
    // 预览模块
    modulePreview (row) {
      this.layoutData = row;
      this.modulePreviewDialogVisible = true;
    },
    layoutPreview () {
      if (this.requestParam.rela_id == "" || this.companyTreeData.value == "") {
        this.$message({
          showClose: true,
          message: "请选择单位和页面",
          type: "warning"
        });
      } else {
        this.$router.push({
          path: "PageComPriview",
          query: {
            isEdit: false,
            unitId: this.requestParam.rela_id,
            pageId: this.companyTreeData.value,
            instance_type: 1
          }
        });
      }
    },
    layoutDefinition () {
      if (this.requestParam.rela_id == "" || this.companyTreeData.value == "") {
        this.$message({
          showClose: true,
          message: "请选择单位和页面",
          type: "warning"
        });
      } else {
        this.$router.push({
          path: "PageComPriview",
          query: {
            uuid: this.uuid,
            isEdit: true,
            unitId: this.requestParam.rela_id,
            pageId: this.companyTreeData.value,
            instance_type: 1
          }
        });
      }
    },
    handlePageChange (page) {
      this.requestParam.page = page;
      this.getModuleList();
    }
  },
  created () {

  },
  mounted () {

  }
};
</script>
<style scoped lang='scss'>
#bottomMargin {
  margin-top: 20px;
}
.page-com-custom-container {
  width: 100%;
  min-height: 500px;
  padding: 20px;
  .choose-company-input {
    width: 235px;
  }

  .page-component-table {
    margin-top: 20px;
  }
}
</style>
